<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 300px;height:400px;border: solid 1px black;margin: 0 auto;}
    .box .cont{height: 300px;border-bottom: solid 1px black;overflow: auto;}
    .box .cont p{margin: 4px;padding: 4px;border-radius: 4px;color: #fff;clear: both;max-width: 200px;}
    .box .cont p:nth-child(2n){background: #3a3;float: left;}
    .box .cont p:nth-child(2n-1){background: #33a;float: right;}
  </style>
</head>
<body>
  <div class="box">
    <div class="cont"></div>
    <div class="control">
      <textarea class="txt"></textarea>
      <input type="button" value="发送" class="send">
    </div>
  </div>
</body>
<script>

  var send = document.querySelector(".send");
  var txt = document.querySelector(".txt");
  var cont = document.querySelector(".cont");

  send.onclick = function(){
    sendMsg()
  }

  txt.onkeydown = function(eve){
    var e = eve || window.event;
    var code = e.keyCode || e.which;
    // 回车发送
    if(code === 13){
      sendMsg()
      // 阻止默认事件
      e.preventDefault();
    }
  }

  txt.onmousedown = function(eve){
    var e = eve || window.event;
    e.stopPropagation();
  }

  document.onmousedown = function(eve){
    var e = eve || window.event;
    e.preventDefault();
  }
  document.onkeydown = function(eve){
    var e = eve || window.event;
    var code = e.keyCode || e.which;
    if(code === 65 && (e.ctrlKey || e.metaKey)){
      e.preventDefault();
    }
  }
  document.oncontextmenu = function(eve){
    var e = eve || window.event;
    e.preventDefault();
  }

  function sendMsg(){
    // 输入框为空，不执行
    if(txt.value === "") return;
    // 创建元素
    var p = document.createElement("p");
    // 设置新元素内容为输入框内容
    p.innerHTML = txt.value;
    // 将新元素插入到指定容器
    cont.appendChild(p);
    // 清空输入框内容
    txt.value = "";
    // 将内容区域的滚动距离设置为内容区域的总高度（保证最新消息在可视区域内）
    cont.scrollTop = cont.scrollHeight;
  }


  
</script>
</html>